<template>
  <div id="app">
    <AddBook></AddBook>
    <header>
      <div class="logo-container">
        <img alt="Vue logo" src="./assets/logo.png" class="logo" width="50px">
        <h1 class="title">图书管理系统</h1>
      </div>
      <nav>
        <!-- 可以添加导航链接到图书列表和添加图书的页面 -->
        <router-link to="/">图书列表</router-link> |
        <router-link to="/add-book">添加图书</router-link>
        <router-view></router-view>
        
      </nav>
    </header>

  
     
      <!-- 主要内容区域，这里通过 router-view 显示不同页面的内容 -->
      <router-view></router-view>
    

    <!-- <Book v-for="book in books" :key="book.index" :bookname="book.bookname" :author="book.author"></Book> -->

    <!-- <BookList :tableData="tableData"></BookList> -->

    <footer>
      <!-- 底部信息，可以放置一些版权信息等 -->
      <p>&copy; 2023 图书管理系统</p>
    </footer>
  </div>
</template>

<script>
import Book from './components/Book.vue';
import BookList from './views/BookList.vue';
import AddBook from './views/AddBook.vue';



export default {
  name: 'App',
  components: {
    Book,
    BookList,
    AddBook
},
  created:function(){
    // mounted:function(){
    console.log("app组件被创建");
    this.$http.get("book/init").then(
      (response)=>{
        this.tableData = response.data.data;
        console.log(this.tableData)
      }
    )
  },
  mounted:function(){
    console.log("app组件被挂载")
  },
  data :function() {
    return {
      books:[
                {bookname:"Thinking In Java",author:"unknown"},
                {bookname:"Thinking In C++",author:"unknown"},
                {bookname:"Thinking In Python",author:"unknown"},
            ],
      tableData:[
        // {
        //   id: '1',
        //   bookname: 'Thinking In Java',
        //   author: '王小虎',
        //   score: 4.9
          
        // }, 
        // {
        //   id: '2',
        //   bookname: 'Thinking In C++',
        //   author: '王小虎',
        //   score: 3.7
        // }, 
        // {
        //   id: '3',
        //   bookname: 'Thinking In python',
        //   author: '王小虎',
        //   score: 4.1
        // }, 
        // {
        //   id: '4',
        //   bookname: 'Thinking In Js',
        //   author: '王小虎',
        //   score: 2.9
        // }
        ]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.logo-container {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
}

header {
  background-color: #41b883;
  padding: 20px;
  color: white;
}

.title {
  margin: 0;
}

.logo {
  margin-right: 20px; /* 调整 Logo 右边距 */
}

nav {
  display: inline-block;
}

nav router-link {
  color: white;
  text-decoration: none;
  margin-right: 10px;
}

main {
  padding: 20px;
}

footer {
  margin-top: 20px;
  padding: 10px;
  background-color: #ecf0f1;
}
</style>
